<template>
	<screen-page title="发货检验区">
		<div class="page-screen4-container ver-flex-containter">
			<div class="special-blcok special-blcok-size-a">
				<module1 :data-source="data1" />
			</div>
			<div class="ver-flex-block">
				<screen-block :title="'今日发货信息{'+count+'}'">
					<module2 :data-source1="data2" :data-source2="data3" v-if="loaded" />
				</screen-block>
			</div>
		</div>
	</screen-page>
</template>

<script setup>
import { ref, getCurrentInstance, inject, onMounted, onBeforeUnmount } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import ScreenBlock from '@/components/ScreenBlock.vue'
import Module1 from './modules/Screen4Module1.vue'
import Module2 from './modules/Screen4Module2.vue'

const instance = getCurrentInstance()
const $config = inject('$config')
const $api = inject('$api')

let interval = null;

const count = ref(0)
const data1 = ref({})
const data2 = ref([])
const data3 = ref([])
const loaded = ref(false)

const getData = function(){
	loaded.value = false
	$api.get('ScreenRece',{},{block:'screen3',loading:true}).then((d)=>{
		data1.value = d.receNum || {}
		data2.value = d.awaitInformation || []
		data3.value = d.notInspection || []
		count.value = d.sumNumber || 0
		loaded.value = true
	}).catch(()=>{
		loaded.value = true
	})
}

const createInterval = function(){
	interval = window.setInterval(getData,$config.base.screen.screen3.intervalTime)
}

const destoryIntervel = function(){
	try{
		window.clearInterval(interval)
		interval = null
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>

<style scoped lang="scss">
.page-screen4-container{
	padding-bottom: 0.68%;
	height: 100%;
	box-sizing: border-box;
	.special-blcok{
		flex-shrink: 0;
	}
	.special-blcok-size-a{
		height: 18%;
	}
	.ver-flex-block{
		height: 1px;
		flex-grow: 1;
	}
}
</style>